<template>
  <div>
    <ul>
      <li><button @click="LoadingMethod()" >LoadingMethod</button>
      </li>
      <li><button @click="logs()">logs</button></li>
      <li><button @click="LoadingTrack()">LoadingTrack</button></li>
      <li><button @click="Rorate()">Rorate</button></li>
      <li><button @click="LoadingSceneMaterials()">LoadingSceneMaterials</button></li>
       <li><button @click="run()">Run</button></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
     <div class="log-content ">
        <h6> name:{{userData.name}}</h6>
        <h6>data:{{userData.data}}</h6>
        <h6>id:{{userData.id}}</h6> 
        <h6>title:{{userData.title}}</h6> 
     </div>

    <!-- <div class="log-content"> 111</div>   -->
    <div class="three-canvas" ref="threeTarget"></div>
  </div>
</template>
<script>
import {
  ThreeController,
  LoadingGLTFMethod,
  renderer,
  camera,
  scene,
  SceneMapMaterial
} from "@/components/ThreeController"; //中央渲染控制
import { ModelListConfig,pathPoints,LoadingTrack } from "@/components/ModelListConfig"; //模型数组
import { LightList } from "@/components/LightListConfig"; //光线
import { allHelper } from "@/components/AxesHelperConfig"; //辅助配置
/*
threejs 官网 :https://threejs.org/
threejs 案例: https://threejs.org/examples/#webgl_animation_keyframes
threejs API:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
*/
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      ThreeController: null,
      userData: {},
      test: {},
      num:0,
      speed:0.05,
      SceneList:[ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] 

    };
  },
  created() {

  },
  mounted() {
    this.init();
    // this.LoadingMethod()
  },
  methods: {
    init() {
      this.ThreeController = new ThreeController(this.$refs.threeTarget);
      this.ThreeController.addObject(...ModelListConfig); // 添加基础模型
      this.ThreeController.addObject(...LightList); // 添加自然光线，即开灯，不然显示不出来创造的模型
      this.ThreeController.addObject(...allHelper); // 添加辅助线
    },
    logs() {
        this.test = this.ThreeController.scene.children.find((item) => {
        if(item.userData.name){
              return item.userData.name == "LoadingGLTFModel";
        }
      });
     console.log(this.test);
     this.userData=this.test.userData
    },
    Rorate(){
      this.test = this.ThreeController.scene.children.find((item) => {
        return item.userData.name == "LoadingGLTFModel";
      });
      this.animates();
    },
    Wait(){
    },
    animates() {
      requestAnimationFrame(this.animates);
      this.test.position.x += 0.01;
      this.test.position.y += 0.01;
      this.test.position.z += 0.1;
      renderer.render(scene, camera);
    },
    run(){
      this.test = this.ThreeController.scene.children.find((item) => {
        return item.userData.name == "LoadingGLTFModel";
      });
      this.runanimates();
      console.log(pathPoints)
    },
    runanimates(){
            if(this.num<=pathPoints.length-2){
               this.num+=1
            }else{
               this.num=0
            }
            requestAnimationFrame(this.runanimates);
            this.test.position.x = pathPoints[ this.num].x ;
            this.test.position.y = pathPoints[ this.num].y;
            this.test.position.z = pathPoints[ this.num].z
            renderer.render(scene, camera);
    },
    LoadingSceneMaterials(){  
          scene.background =  SceneMapMaterial(this.SceneList) //  max px  1024*1024
    },
    LoadingTrack(){
        this.ThreeController.addObject(...LoadingTrack())
    },
    //外部导入
    LoadingMethod() {
      LoadingGLTFMethod("Soldier.glb",1);

    },
  },
};
</script>
<style lang="scss" scoped>
.three-canvas {
  width: 100vw;
  height: 100vh;
  background-color: #d6eaff;
}
ul{
  position: absolute;
  right: 10px;
  top: 10px;
}
.log-content {
  width: 200px;
  height: 60px;
  position: absolute;
  margin: 10px;
  background-color: skyblue;
}
</style>